<script setup lang="ts">
import { getNumUnit, getScore } from "~/utils/func";
import defoultImg from "~/assets/app-mj.png";
import { useSocketStore } from "~/store/useSocket";
import { useImageCache } from "~/composables/useImageCache";

const socketStore = useSocketStore();
const { getCoverImage } = useImageCache();
const emits = defineEmits<{
  refresh: [dataItem: any];
}>();
const props = defineProps({
  dataItem: {
    type: Object,
    default: () => ({}),
  },
  itemIndex: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: "commodity",
  },
});

const toDetails = () => {
  emits("refresh", props.dataItem);
};

const coverPic = computed(() => {
  // 直接使用图片缓存处理
  if (props.dataItem.coverPic) {
    return getCoverImage(props.dataItem.coverPic);
  }
  return '';
});

const profile = computed(() => {
  if (props.type === "commodity" || props.dataItem.shopAvatar) {
    return getCoverImage(props.dataItem.shopAvatar) || props.dataItem.shopAvatar;
  }
  return defoultImg;
});

// 在线状态
const isOnline = ref(0);
const getIsOnline = () => {
  const imKey = props.dataItem.uimKey;
  console.log("imKey", imKey);
  if (imKey) {
    socketStore.sendMessage("userOnline", [imKey], (res) => {
      console.log("res", res);
      if (res.code === 200) isOnline.value = res.data[0].online;
    });
  }
};
getIsOnline();
</script>

<template>
  <div class="recommending-item" @click="toDetails">
    <div class="recommending-img">
      <img v-if="coverPic" :src="coverPic" :alt="props.dataItem.goodsName" loading="lazy">
      <img v-else :src="defoultImg" :alt="props.dataItem.goodsName || '商品图片'" />
    </div>
    <div class="info">
      <p class="goods-name">{{ props.dataItem.goodsName }}</p>
      <div class="user-name">
        <div class="name">
          <el-image class="head" :src="profile" :alt="props.dataItem.shopName || '用户头像'">
            <template #error>
              <div class="image-error">
                <img class="head" :src="defoultImg" :alt="props.dataItem.shopName || '用户头像'" />
              </div>
            </template>
          </el-image>
          <span class="online" :class="{ active: isOnline }"></span>
          <span class="name-text"
            >{{ props.dataItem.shopName }}
            <span class="lv">Lv{{ props.dataItem.level || '1'}}</span></span
          >
        </div>
        <span class="tip" v-if="props.dataItem.isBond">保证金</span>
      </div>
      <div class="price">
        <img class="mack" src="~/assets/mack-icon.png" alt="" />
        <span class="self-tag" :class="{ 'self-operated': props.dataItem.isSelf === 1 }">
          {{ props.dataItem.isSelf === 1 ? '自营' : '非自营' }}
        </span>
        <span class="price-num"><span>¥</span>{{ props.dataItem.goodsSkuVoList && props.dataItem.goodsSkuVoList.length > 0 && props.dataItem.goodsSkuVoList[0].goodsAmount || '0.00' }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recommending-item {
  display: flex;
  flex-direction: column;
  width: 285px;
  flex: 0 0 285px;
  height: 320px;
  background: #fff;
  box-shadow: 0px 0 16px 0 rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  margin-bottom: 20px;
  &:hover {
    box-shadow: 0px 0 10px 5px #ddd;
  }
}
.recommending-img {
  width: 100%;
  height: 182px;
  cursor: pointer;
  background: rgba(221, 221, 221, 0.44);
  border-radius: 16px 16px 0 0;
  overflow: hidden;

  &:hover {
    img {
      transform: scale(1.1);
    }
  }
  img {
    width: 100%;
    height: 182px;
    border-radius: 16px 16px 0 0;
    border: none;
    object-fit: cover;
    transition: all 0.3s;
  }
}
.info {
  padding: 12px 16px;
  box-sizing: border-box;
  .goods-name {
    font-size: 15px;
    color: #191e28;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 12px;
    cursor: pointer;
    height: 48px;
    &:hover {
      color: #1dbf73;
    }
  }
  .user-name {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .name {
      cursor: pointer;
      flex: 1;
      display: flex;
      align-items: center;
      position: relative;
      &:hover {
        .head {
          border: 1px solid #1dbf73;
        }
        .name-text {
          color: #1dbf73;
        }
      }
      .head {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        margin-right: 6px;
        box-sizing: border-box;
        border: 1px solid #fff;
        object-fit: cover;
      }
      .image-error {
        width: 24px;
        height: 24px;
        border-radius: 100%;
        overflow: hidden;
        .head {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .online {
        position: absolute;
        top: 16px;
        left: 16px;
        width: 100%;
        height: 100%;
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 100%;
        &.active {
          background: #1dbf73;
        }
      }
      .name-text {
        color: rgba(25, 30, 40, 0.72);
        .lv {
          color: #1dbf73;
          font-size: 12px;
        }
      }
    }
    .tip {
      background: rgba(255, 140, 29, 0.08);
      border-radius: 4px;
      color: #ff8c1d;
      padding: 2px 7px;
      cursor: pointer;
    }
  }
  .price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 16px;
    margin-bottom: 4px;
    .mack {
      width: 16px;
      height: 16px;
      margin-right: 4px;
      position: relative;
      top: -1px;
      cursor: pointer;
      display: none;
    }
    .self-tag {
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 12px;
      color: rgba(25, 30, 40, 0.72);
      background: rgba(25, 30, 40, 0.08);
      cursor: pointer;
      
      &.self-operated {
        background: rgba(29, 191, 115, 0.1);
        color: #1dbf73;
      }
    }
    .price-num {
      font-size: 20px;
      color: #ff4f4f;
      font-weight: bold;
      cursor: pointer;
      span {
        font-size: 14px;
      }
    }
  }
}
</style>
